<template>
	<view :style="skin" class="content chooseImage">
		<fui-image-cropper round :src="src" ref="cropper"></fui-image-cropper>
		<view class="fui-cropper__tabbar">
			<!-- <text class="info">您修改的头像将在审核通过后生效，请在 24 小时内关注审核结果。</text> -->
			<view class="btnBox">
				<view class="handlebtnBox">
					<u-button type="primary" :plain="true" color="var(--borderColor)" shape="circle" :hairline="true"
						@click="cancel">
						<text class="cancelText">取消</text>
					</u-button>
				</view>
				<view class="handlebtnBox">
					<u-button type="primary" shape="circle" color="var(--subjectColor)" @click="cutting">
						<text class="confirmText">确认</text>
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		updateUserInfo,
		iconUpload
	} from '@/api/user.js'
	export default {
		data() {
			return {
				src: '',
				// userInfo:{},
				show: false,
				timer: null,
				backTimer: null
			}
		},
		onLoad(options) {
			let that = this
			this.timer = setTimeout(() => {
				that.src = options.src
				// that.userInfo = JSON.parse(uni.getStorageSync('loginInfo'))
			}, 500)

		},
		onUnload() {
			this.timer && clearTimeout(this.timer)
		},

		methods: {
			cancel() {
				this.timer && clearTimeout(this.timer)
				uni.navigateBack()
			},
			cutting() {
				let that = this
				if (this.$refs.cropper) {
					this.$refs.cropper.cutting((filPath) => {
						iconUpload(filPath).then(uploadRes => {
							let data = JSON.parse(uploadRes)
							if (data.code == 0) {
								let obj = {
									userHeadimgurl: data.data
								}
								updateUserInfo(obj).then(updateUseRes => {
									that.loading = false
									if (updateUseRes.code == 0) {
										// that.userInfo.userHeadimgurl = data.data
										// uni.setStorageSync('loginInfo', JSON.stringify(that
										// 	.userInfo))
										// uni.$emit('update_user')

										that.timer && clearTimeout(that.timer)
										uni.navigateBack()
									}
								})
							}
						})


					})
				}
			}
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},

	}
</script>

<style scoped lang="scss">
	.chooseImage {
		.fui-cropper__tabbar {

			z-index: 20;
			position: relative;
			flex-direction: row;
			position: absolute;
			height: 366rpx;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 16px;
			box-sizing: border-box;
			border-top: 0.5px solid #666;
			background-color: rgba(0, 0, 0, 0.55);

			.info {
				color: #fff;
				font-size: 14px;
				line-height: 21px;
				height: 130rpx;
			}

			.btnBox {
				width: 100%;
				height: 168rpx;
				padding: 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;

				.handlebtnBox {
					width: calc(50% - 4px);
				}

				.cancelText {
					color: var(--subjectColor);
					font-size: 17px;
				}

				.confirmText {
					color: $uni-color-white;
					font-size: 17px;
				}
			}

			text {
				color: #fff;
			}
		}
	}
</style>